<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
		<title>抽奖活动</title>
		<!-- 引入 Vue 和 Vant 的 JS 文件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue-seamless-scroll@1.1.17/dist/vue-seamless-scroll.min.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="https://cdn.bootcss.com/qs/6.5.1/qs.min.js"></script>
		<style>
			/* 初始化 */
			body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } 
			body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } 
			h1, h2, h3, h4, h5, h6{ font-size:100%; } 
			address, cite, dfn, em, var { font-style:normal; } 
			code, kbd, pre, samp { font-family:couriernew, courier, monospace; } 
			small{ font-size:12px; } 
			ul, ol { list-style:none; } 
			a { text-decoration:none; } 
			a:hover { text-decoration:underline; } 
			sup { vertical-align:text-top; } 
			sub{ vertical-align:text-bottom; } 
			legend { color:#000; } 
			fieldset, img { border:0; } 
			button, input, select, textarea { font-size:100%; } 
			table { border-collapse:collapse; border-spacing:0; }
			
			body{background-color: #FBE2D2;}
			/* 主数据 */
			.cancel{display: flex;align-items: center;justify-content: center;margin-top:16px;}
			.cancel_img{width: 36px;height: 36px;}
			.cancel_img img{width: 100%;height: 100%;}
			/* 无缝滚动 */
			.seamless-warp {height: 250px;overflow: hidden;font-size: 15px;}
			.hint {height: 250px;}
			.hint img{width: 100%;}
			
			.seamless-warp .item li{display: flex; justify-content: space-around;} 
			.seamless-warp .item li{margin-bottom: 7px;} 
			.seamless-warp .item li p:nth-child(1){
				width: 100px;
				overflow:hidden;
				text-overflow:ellipsis;
				display:-webkit-box;
				-webkit-box-orient:vertical;
				-webkit-line-clamp:1; 
				} 
			 .the-winners{color: #CB373D;width: 100%;background-color: #FBE2D2;}
			 .the-winners .title{text-align: center;font-size: 20px;line-height: 37px;}
			 
			 /* 图片 */
			 .activity_img_top{
				 width: 100%;
				 height: 100%;
				 font-size:0;
				 
			 }
			 .activity_img_button{
				 width: 100%;
				 height: 100%;
			 }
			 .activity_img_top img,.activity_img_button img{
				 width: 100%;
				 dispaly:block;
			 }
		</style>
		
	</head>
	<body>
		<!-- -->
		<div class="sTIndex" id="app">
			<div class="sti_box" style="overflow: scroll;">
				<div class="activity_img_top">
					<img src="https://image.soole.com.cn/cj_top_20200120.png" alt="">
				</div>
				
				<div class="hint" v-if='listData.length<=0'>
					<img src="https://image.soole.com.cn/20200120_01_qidai.png" alt="">
				</div>
				<div class='the-winners' v-else>
					<div class='title'>中奖名单</div>
					<vue-seamless-scroll :data="listData" class="seamless-warp">
						<ul class="item">
						   <li v-for="(item,index) in listData" :key='index'>
								<p>ID：{{item.user_id}}</p>
								<p>手机号：{{item.phone}}</p>
								<p>{{item.reward_level}}</p>
						   </li>
						</ul>
					</vue-seamless-scroll>
				</div>
				<div class="activity_img_button">
					<img src="https://image.soole.com.cn/cj_db_20200120.png" alt="">
				</div>
			</div>
		</div>
		<script>
			var vue = new Vue({
				el: '#app',
				data: {
					ruleBool:false,
					animate:true,
					  listData: [],
				},
				watch: {},
				mounted() {},
				created() {this.getList();},
				methods: {
					//关闭活动规则的弹窗
					cancel() {
						this.ruleBool = false;
					},
					// JSON.stringift
					getList(){
						// axios.get('http://appapi.sootoken.com.cn/searched-api/api/common/v1/CoverageReward/getRewardList')
						axios.get('http://cbr.sootoken.com.cn/searched-api/api/common/v1/CoverageReward/getRewardList')
						  .then((res) => {
							console.log(res);//请求的返回体
							if(res.data.success){
								this.listData = res.data.data.list;
								if(this.listData){
									this.infoList();
								}
							}
						  })
						  .catch((error) => {
							console.log(error);//异常
						  });
					},
					infoList(){
						this.listData.forEach(item=>{
							item.phone = item.phone.slice(0,3)+"****"+item.phone.slice(7)
							if(item.reward_level==1){
								item.reward_level = '一等奖'
								return
							}else if(item.reward_level==2){
								item.reward_level = '二等奖'
								return
							}else if(item.reward_level==3){
								item.reward_level = '三等奖'
								return
							}
						})
					}

				},
				components: {
				},
			})
		</script>
	</body>
</html>
